<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Water by css</title>
    <style>
      /* 定义水滴 */
      .water {
        margin-top: 200px;
        margin-left: 200px;
          width: 200px;
          height: 200px;
          background-color: #007BFF;
          border-radius: 50%;
          position: relative;
          overflow: hidden;
      }

      /* 第一个波纹 */
      .water::before {
          content: "";
          position: absolute;
          width: 200%;
          height: 200%;
          top: -150%;
          left: -50%;
          background-color: rgba(255, 255, 255, 0.2);
          /* 这个控制大饼没那么圆 */
          border-radius: 40%;
          /* 动画5s，线性动画，一直循环 */
          animation: rotate 5s linear infinite ;
      }

      /* 第二个波纹 */
      .water::after {
          content: "";
          position: absolute;
          width: 200%;
          height: 200%;
          top: -150%;
          left: -50%;
          background-color: rgba(255, 255, 255, 0.2);
          /* 为了波纹更随机，此处的值要与第一个波纹不一样 */
          border-radius: 35%;
          /* 动画时间也拉长，尽量与第一个波纹不同 */
          animation: rotate 7s ease infinite;
      }

      /* 定义大饼(波纹)旋转动画 */
      @keyframes rotate {
          from {
              transform: rotate(0deg);
          }
          to {
              transform: rotate(360deg);
          }
      }
    </style>
</head>

<body>
    <div class="water"></div>
</body>

<script>
  const list = [1,2,3,4,5,6]
  list.forEach(item=>{
    console.log(item)
  })
</script>
</html>

